<template>
  <div class="head">
    用户ID: <el-input v-model="useCounterStore().UserID" style="width: 240px" placeholder="输入用户ID" clearable />
    用户名: <el-input v-model="useCounterStore().UserName" style="width: 240px" placeholder="输入用户名" clearable />
    <el-button type="primary" @click="fn">查询</el-button>
  </div>
  <div class="container">
    <div>
      <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id" border default-expand-all>
        <el-table-column prop="id" label="id" sortable />
        <el-table-column prop="userName" label="userName" sortable />
        <el-table-column prop="realName" label="realName" sortable />
        <el-table-column prop="content" label="content" sortable />
        <el-table-column prop="createTime" label="createTime" sortable />
      </el-table>
    </div>
  </div>
  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="useCounterStore().ClickPage" v-model:page-size="useCounterStore().PageSize"
      :page-sizes="[10, 20, 30, 40]" :size="useCounterStore().size" :disabled="useCounterStore().disabled"
      :background="useCounterStore().background" layout="total, sizes, prev, pager, next, jumper" :total="400"
      @size-change="useCounterStore().handleSizeChange" @current-change="useCounterStore().handleCurrentChange" />
  </div>
</template>

<script lang="ts" setup>
import { LogCenterGetList } from '@/api/LogCenter'
import { ref, watch } from 'vue'
import { useCounterStore } from "@/stores/ALL";

const tableData = ref<LogCenterGetType[]>([])
const url1 = '/api/admin/user/event/page/list'

// 获取页面
LogCenterGetList(url1, { userId: useCounterStore().UserID, userName: useCounterStore().UserName, pageIndex: useCounterStore().ClickPage, pageSize: useCounterStore().PageSize }).then(res => {
  console.log(res, '日志中心数据');
  tableData.value = res.response?.list as LogCenterGetType[]
  console.log(tableData.value, '日志中心数据测试');
})
watch(() => useCounterStore().ClickPage, () => {
  LogCenterGetList(url1, { userId: null, userName: null, pageIndex: useCounterStore().ClickPage, pageSize: useCounterStore().PageSize }).then(res => {
    tableData.value = res.response?.list as LogCenterGetType[]
  })
})

// // 查询页面
function fn() {
  LogCenterGetList(url1, { userId: useCounterStore().UserID, userName: useCounterStore().UserName, pageIndex: useCounterStore().ClickPage, pageSize: useCounterStore().PageSize }).then(res => {
    console.log(res, '日志中心数据');
    tableData.value = res.response?.list as LogCenterGetType[]
    console.log(tableData.value, '日志中心数据测试');
  })
}




</script>

<style scoped>
.head {
  width: 100%;
  height: 60px;
}

.el-button {
  margin-left: 0px;
}

.el-input {
  margin-right: 10px;
}

.container {
  width: 100%;
}
</style>
